<template>
    <image :src="imageSrc"
           :mode="mode"
           :lazyLoad="lazyLoad"
           @error="error"
           @load="load"
    ></image>
</template>


<script>
    export default {
        name: 'mm-image',
        externalClasses: ['my-class'],
        components: {},
        inheritAttrs: false,
        computed: {
            imageSrc () {
                let src = this.$util.absUrl(this.src);
                return src
            },
            // imageListeners: function () {
            //     const vm = this;
            //     return Object.assign({},
            //         this.$listeners,
            //         {
            //             load: vm.load,
            //             error: vm.error
            //         }
            //     )
            // },
            // imageAttrs () {
            //     const vm = this;
            //     let src = this.$util.absUrl(this.$attrs.src);
            //     return Object.assign({},
            //         this.$attrs,
            //         {src}
            //     )
            // }
        },
        data () {
            return {}
        },
        props: {
            src: String,
            mode: String,
            lazyLoad: Boolean,
        },
        methods: {
            load () {
                this.$emit('error', ...arguments)
                console.log('图片加载成功');
            },
            error () {
                console.log(e, '图片加载失败');
                this.$emit('error', ...arguments)
            }
        }
    }
</script>

<style scoped lang="scss">
    image {
        width: 100%;
        height: auto;
    }
</style>
